---
layout: default
title: 通过手机找回密码
permalink: /retrieve-phone-password/

noFooter: True
onRegisterPage: True
---
{% include login-brand.html %}
<style>
.regiMain {
	width: 1200px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 48px;
	background-color: #fff;
	border: 1px solid #dfeafc;
}
.lineTip div {
	float: left;
}
.regiMain .tit{
	font-size: 20px;
	color: #393939;
	height: 70px;
	line-height: 70px;
	text-align: center;
	margin: 0;
}
.lineTip .nowColr{
	background-color: #2f8df6;
	color: #fff;
}
.lineTip {
	width: 1084px;
	margin: 10px auto;
	height: 44px;
	background-color: #fff;
/*	border-bottom: 1px solid #e2e5eb ;*/
}
.arrow1 {
	width: 342px;
	height: 44px;
	line-height: 44px;
	background-color: #e2e5eb;
	font-size: 19px;
	color: #4e4e4e;
	position: relative;
	text-align: center;
	/*margin-right: 44px;*/
}
.arrow1:after {
	content: "";
	display: inline-block;
	width: 0;
    height: 0;
}
.arrow2 {
	width: 310px;
	height: 44px;
	line-height: 44px;
	background-color: #e2e5eb;
	font-size: 19px;
	color: #4e4e4e;
	text-align: center;
	position: relative;
}
.arrow2:after {
	content: "";
	display: inline-block;
	width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-left: 44px solid #e2e5eb;
    border-bottom: 22px solid transparent;
    position: absolute;
    right: -44px;
    top: 0;
    z-index: 2
}
.arrow3 {
	width: 342px;
	height: 44px;
	line-height: 44px;
	background-color: #e2e5eb;
	font-size: 19px;
	color: #4e4e4e;
	text-align: center;
	position: relative;
}

.PartitionLine {
	width: 45px;
	height: 44px;
	background-color: #fff;
	position: relative;
}
.PartitionLine:after{
	content: "";
	position: absolute;
	left:0px;
	top:0;
	display: inline-block;
	width: 46px;
	height: 44px;
	background:url("../assets/imgs/pages/register/oneArrow.jpg") no-repeat;
	z-index: 2;
}
.PartitionLine3 {
	width: 45px;
	height: 44px;
	background-color: #fff;
	position: relative;
	z-index: 2;
}

.PartitionLine3:after{
	content: "";
	position: absolute;
	left:0px;
	top:0;
	display: inline-block;
	width: 46px;
	height: 44px;
	background:url(/assets/imgs/pages/register/threeBtn.png) no-repeat;
	z-index: 2;
}
.PartitionLine2 {
	width: 45px;
	height: 44px;
	background-color: #fff;
	position: relative;
}
.mainBanner {
	width: 1084px;
	height: 360px;
	background-color: #f6f7fc;
	margin: 0 auto;
	margin-top: 24px;
	text-align: center;
}
.PartitionLine2:after{
	content: "";
	position: absolute;
	left:0;
	top:0;
	display: inline-block;
	width: 46px;
	height: 44px;
	background: url(../assets/imgs/pages/register/oneArrow2.jpg) no-repeat;
	z-index: 2;
}
.bodyList {
	min-height: 470px;
	width: 1084px;
	margin: 0 auto;
	border-top:1px solid #e2e5eb;
}
.bodyList .titBody {
	height: 16px;
	line-height: 16px;
	font-size: 16px;
	color: #3e3e3e;
	margin-top: 45px;
	margin-bottom: 49px;
	text-align: center;
}
.btnKuang {
	width: 216px;
	height: 60px;
	line-height: 60px;
	background-color: #2275de;
}
.widthBorder {
	width: 478px;
	margin: 40px auto;
}
.widthBorder .btnKuang {
	float: left;
	width: 216px;
	height: 60px;
	line-height: 60px;
	background-color: #e2e5eb;
	font-size: 16px;
	color: #838383;
	text-align: center;
	margin-left: 20px;
	border-radius: 4px;
	cursor: pointer;
}

.widthBorder .btnKuang {

}

.widthBorder .phoneBack:before {
	content: "";
	display: inline-block;
	height: 29px;
	width: 20px;
	background: url(../assets/imgs/icons/phone.png) no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 16px;
}
.widthBorder .act.phoneBack:before {
	content: "";
	display: inline-block;
	height: 29px;
	width: 20px;
	background: url(../assets/imgs/icons/phoneAct.png) no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 16px;
}

/*//悬浮的时候出现的*/
/*.widthBorder .phoneBack:before {
	content: "";
	display: inline-block;
	height: 29px;
	width: 20px;
	background: url(../assets/imgs/icons/phoneAct.png) no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 16px;
}*/

.widthBorder .emailBack:before {
	content: "";
	display: inline-block;
	height: 24px;
	width: 34px;
	background: url(../assets/imgs/icons/email.png) no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 16px;
}

.widthBorder .act.emailBack:before {
	content: "";
	display: inline-block;
	height: 24px;
	width: 34px;
	background: url(../assets/imgs/icons/emailAct.png) no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 16px;
}

.widthBorder .btnKuang:hover {
	background-color: #2275de;
	color: #fff;
}
body .widthBorder .act {
	background-color: #2275de;
	color: #fff;
}
.step3_mainBg {
	width: 587px;
	margin: 40px auto 0;
}
.inputLine {
    width: 487px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}
.inputLine label {
    float: left;
    width: 70px;
    height: 40px;
    font-weight: normal;
    color: #757575;
    text-align: right;
    margin-right: 15px;
}
.inputLine .inputNew {
    float: left;
    width: 330px;
    height: 40px;
    margin-bottom: 20px;
    text-indent: 10px;
    border: 1px solid #c3c5c6;
}
.inputLine .redTip {
	display: none;
    position: absolute;
    width: 120px;
    text-align: left;
    right: -70px;
    top: 0;
    height: 40px;
    float: left;
    font-size: 14px;
    color: #f55151;
    margin-left: 18px;
}
.inputLine label {
    float: left;
    width: 70px;
    height: 40px;
    font-weight: 400;
    color: #757575;
    text-align: right;
    margin-right: 15px;
}
.inputLine .borderGreen {
    border: 1px solid #1869c5;
}
.sortBtn {
    float: left;
    width: 200px;
    height: 40px;
    margin-bottom: 20px;
    text-indent: 10px;
    border: 1px solid #c3c5c6;
}
.codeMa, .inputLine .getCodeBtn {
    float: left;
    margin-left: 10px;
    height: 40px;
}
.codeMa {
    width: 124px;
    background: url(/assets/imgs/pages/register/codeMa.jpg) no-repeat;
    background-size: 100% 100%;
}
.inputLine .getCodeBtn {
    width: 125px;
    border: none;
    outline: none;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    background-color: #2275de;
}

.registBtn {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 332px;
    height: 40px;
    line-height: 40px;
    margin:0 auto;
    font-size: 16px;
    color: #fff;
    background-color: #2275de;
    border: none;
    outline: none;
    border-radius: 4px;
    text-decoration: none;
}

.registBtn:hover{
	color: #fff;
	text-decoration: none;
	background-color: #1869c5;
}
.divBody {
	display: none;
}
.divBodyAct {
	display: block;
}
</style>
<div class="regiMain">
	<p class="tit">找回密码</p>
	<div class="cleafix lineTip">
		<div class="arrow1 nowColr">
			选择找回方式
		</div>
		<div class="PartitionLine">
		</div>
		<div class="arrow2">
			设置新密码
		</div>
		<div class="PartitionLine2">
		</div>
		<div class="arrow3">
			完成设置
		</div>
	</div>
	<div class="bodyList">
		<div class="widthBorder clearfix">
			<div class="btnKuang phoneBack act thisAct">通过手机找回密码</div>
			<div class="btnKuang emailBack">通过邮箱找回密码</div>
		</div>
		<div class="divBody divBodyAct">
			<div class="inputLine ">
				<label for="userId">手机号</label>
				<input type="text" id="userId" value="" maxlength="11" placeholder="以字母开头，可以使用数字和下划线，8-20个字" class="inputNew borderGreen">
				<span class="redTip">请设置用户名</span>
			</div>
			<div class="inputLine">
				<label for="pic">图片验证码</label>
				<input type="text" id="pic" maxlength="6"  class="sortBtn" placeholder="请填写图片验证码">
				<span class="codeMa"></span>
				<span class="redTip">请设置图片验证码</span>
			</div>
			<div class="inputLine">
				<label for="duanxin">短信验证码</label>
				<input type="text" id="duanxin" class="sortBtn" placeholder="请填写短信验证码" maxlength="6">
				<button type="button" class="getCodeBtn">获取验证码</button>
				<span class="redTip">请设置短信验证码</span>
			</div>	
			<a class="registBtn" href="/retrieve-phone-password-Two/" target="_self">下一步</a>
		</div>
		<div class="divBody">
			<div class="inputLine ">
				<label for="userId">邮箱账号</label>
				<input type="text" id="userId" value="" maxlength="11" placeholder="以字母开头，可以使用数字和下划线，8-20个字" class="inputNew borderGreen">
				<span class="redTip">请输入与平台绑定的邮箱账号</span>
			</div>
			<div class="inputLine">
				<label for="pic">图片验证码</label>
				<input type="text" id="pic" maxlength="6"  class="sortBtn" placeholder="请填写图片验证码">
				<span class="codeMa"></span>
				<span class="redTip">请设置图片验证码</span>
			</div>
			<a class="registBtn" href="/retrieve-phone-password-two/" target="_self">发送验证邮件</a>
		</div>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
//标题选中事件
$(".widthBorder .btnKuang").hover(function(){
    $(this).addClass("act");
},function(){
	if(!$(this).hasClass("thisAct") ){
		$(this).removeClass("act");
	}
});

$(".widthBorder .btnKuang").on("click",function(){
	// nav
	$(".widthBorder .btnKuang").each(function(){
		$(this).removeClass("act");
		$(this).removeClass("thisAct");
	});
	$(this).addClass("act");
	$(this).addClass("thisAct");
	//content
	$(".divBody").each(function(){
		$(this).removeClass("divBodyAct");
	});
	$(".divBody").eq($(this).index()).addClass("divBodyAct");

});
// 表单验证
</script>
{% include login-footer.html %}